<template>
    <view class="card-box">
        <view class="img-box" @click.stop="dspDetail(cardData.itineraryId)">
            <image :src="cardData.itineraryTitleImg" class="img-title"></image>
            <img :src="cardData.mainPicture" class="img" />
            <view class="text-bg-box" @click.stop="dspDetail(cardData.itineraryId)">
                <view class="text-box">
                    <view class="text-view omit2">{{cardData.recReason}}</view>
                    <view class="right-view">
                        <text class="right-text">详情</text>
                        <img src="https://cdn1.visiotrip.com/h5AndMini/2024-04-19/address-more.png" class="right-icon" />
                    </view>
                </view>
            </view>
        </view>
        <view class="footer-view">
            <view :class="{'active':unClickable, 'left': index === 0}" v-for="(item,index) in cardData.buttonList" :key="index" @click.stop="buttonClick(item)" class="footer-btn">
                {{ item.btnName }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props:{
        cardData:{
            type:Object,
            default: () => {
                return {}
            }
        },
        unClickable:{
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    methods:{
        dspDetail(id){
            const buyBtnIndex = this.cardData.buttonList.findIndex(e => e.btnType == 2)
            const isShowBuy = buyBtnIndex !== -1
            uni.navigateTo({
                url: '/ai/pages/aiDSPDetailNew/aiDSPDetailNew?dspId=' + id + '&isBack=1&isShowBuy=' + isShowBuy,
            })
        },
        buttonClick(item){
            if(item.btnType === 3){
                // this.$emit('actionClick', {...item, actionText: item.message, buttonType: item.btnType})
                this.dspDetail(this.cardData.itineraryId)
            }else if(item.btnType === 2){
                this.$emit('showProduct',this.cardData.itineraryId)
            } else if(item.btnType === 1) {
                this.$emit('actionClick', {...item, actionText: item.message, buttonType: item.btnType})
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "../css/common.scss";
    .card-box {
        // height: 442rpx;
        // background: rgba(255,255,255,0.7);
        border-radius: 8rpx 26rpx 26rpx 26rpx;
        // border: 4rpx solid #FFFFFF;
        margin: 44rpx 20rpx 24rpx 20rpx;
    }
    .img-box {
        // width: 100%;
        height: 290rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
            width: 100%;
            height: 290rpx;
            border-radius: 26rpx;
            position: absolute;
            left: 0;
            top: 0;
        }
        .text-bg-box {
            display: flex;
            align-items: flex-end;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 220rpx;
            background: linear-gradient(180deg, rgba(238,238,238,0) 0%, rgba(41,41,41,0.5) 100%);
            padding: 22rpx 24rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 30rpx;
            border-radius: 0 0 26rpx 26rpx;
            .text-box {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .text-view {
                width: 415rpx;
            }
            .right-view {
                max-height: 60rpx;
                display: flex;
                align-items: center;
                margin-left: 27rpx;
                .right-text {

                }
                .right-icon {
                    width: 20rpx;
                    height: 20rpx;
                }
            }
        }
        .img-title{
            width: 502rpx;
            height:250rpx;
            position: absolute;
            z-index: 999;
            top: 0;
        }
    }
    .footer-view {
        display: flex;
        justify-content: space-between;
        .footer-btn {
            width: 317rpx;
            border-radius: 16rpx;
            color: $sl-color-black;
            background: #B4EF4E;
            height: 80rpx;
            font-weight: 600;
            &.left {
                background: #E4E4F4;
            }
            &.active{
                background: #E4E4F4;
                color: #B5B5D2;
                opacity: 0.6;
            }
        }
    }
</style>